﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/HomeMaster.Master" AutoEventWireup="true" CodeBehind="DemonstrateView.aspx.cs" Inherits="OnlinePayment.Home.DemonstrateView" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<style type="text/css">
    h1{
        font-family: Arial, sans-serif;
        font-size: 24px;
        color: #369;
        padding-bottom: 4px;
        text-align:center;
    }
    
    .annBody
    {
        font-size:20px;
	    padding:0px 40px 40px 40px;
    }
    .helptitle
    {
        font-size: 20px;
            font-weight: bold;
            color:Red;
    }
</style>


<script src="Content/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Content/Scripts/pagination/jquery.pagination.js" type="text/javascript"></script>
<link rel="stylesheet" href="Content/Scripts/pagination/pagination.css" type="text/css" />
<script type="text/javascript" src="Content/Scripts/members.js"></script>





<script type="text/javascript">
    // This file demonstrates the different options of the pagination plugin
    // It also demonstrates how to use a JavaScript data structure to
    // generate the paginated content and how to display more than one
    // item per page with items_per_page.
    /**
    * Callback function that displays the content.
    *
    * Gets called every time the user clicks on a pagination link.
    *
    * @param {int}page_index New Page index
    * @param {jQuery} jq the container with the pagination links as a jQuery object
    */
    function pageselectCallback(page_index, jq) {
        // Get number of elements per pagionation page from form
        var items_per_page = $('#items_per_page').val();
        var max_elem = Math.min((page_index + 1) * items_per_page, members.length);
        var newcontent = '';
        // Iterate through a selection of the content and build an HTML string


        for (var i = page_index * items_per_page; i < max_elem; i++) {
            newcontent += '<dt class="helptitle">' + members[i][0] + '</dt><br/><br/>';
            newcontent += '<img src="' + members[i][1] + '" width="768" height="576" usemap="#hot" border="0" />';

            newcontent += '<dd class="state">' + members[i][2] + '</dd>';
            newcontent += '<dd class="party">' + members[i][3] + '</dd>';

            $('#hot').children("area").attr("coords", members[i][2]);
        }
        // Replace old content with new content
        $('#Searchresult').html(newcontent);
        // Prevent click eventpropagation
        return false;
    }


    // The form contains fields for many pagiantion optiosn so you can
    // quickly see the resuluts of the different options.
    // This function creates an option object for the pagination function.
    // This will be be unnecessary in your application where you just set
    // the options once.
    function getOptionsFromForm() {
        var opt = { callback: pageselectCallback };
        // Collect options from the text fields - the fields are named like their option counterparts
        $("input:text").each(function () {
            opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
        });
        // Avoid html injections in this demo
        var htmlspecialchars = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }
        $.each(htmlspecialchars, function (k, v) {
            opt.prev_text = opt.prev_text.replace(k, v);
            opt.next_text = opt.next_text.replace(k, v);
        })
        return opt;
    }


    // When document has loaded, initialize pagination and form
    $(document).ready(function () {
        // Create pagination element with options from form
        var optInit = getOptionsFromForm();
        $("#Pagination").pagination(members.length, optInit);
        // Event Handler for for button
        $("#setoptions").click(function () {
            var opt = getOptionsFromForm();
            // Re-create pagination content with new parameters
            $("#Pagination").pagination(members.length, opt);
        });
    });

    function nextpage() {
        $("#Pagination").children(".current").next("a").click();
    }

</script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div class="cleaner_h20"></div>
             <div class="homeinfo">
                <div class="rightnow">

                    <h3 style="text-align:center;" class="reallynow">
                        缴费演示
                        <br />
                    </h3>
				    <div class="cleaner_h20"></div>
                       




                       

                    <br/>


<div style=" text-align:center; ">

                 


<br/>


<div class="cleaner_h20"></div>
<dl id="Searchresult">
    <dt>Search Results will be inserted here ...</dt>


</dl>
<map name="hot" id="hot">
  <area shape="rect" coords="" href="javascript:nextpage()" />
</map>


<div class="cleaner_h20"></div>


        <div style=" text-align:center; margin-right:70px; " id="Pagination" class="pagination"></div>
        <br style="clear:both;" />


<div style="visibility:hidden;" id="paginationoptions">
    <p>
        <label for="items_per_page">Number of items per page</label>
      <input id="items_per_page" class="numeric" type="text" name="items_per_page" value="1">
    </p>
    <p>
        <label for="num_display_entries">Number of pagination links shown</label>
        <input id="num_display_entries" class="numeric" type="text" name="num_display_entries" value="10">
    </p>
    <p>
        <label for="num">Number of start and end points</label>
        <input id="num_edge_entries" class="numeric" type="text" name="num_edge_entries" value="2">
    </p>
    <p>
        <label for="prev_text">"Previous" label</label>
        <input id="prev_text" type="text" name="prev_text" value="Prev">
    </p>
    <p>
        <label for="next_text">"Next" label</label>
        <input id="next_text" type="text" name="next_text" value="Next">
    </p>
    <input id="setoptions" type="button" value="Set options">
</div>



</div>










                        

			    </div><!--end of needed done-->
             </div>







             <!-- Code Backup About FLASH
<div style=" text-align:center; ">
    <OBJECT WIDTH="800" HEIGHT="650">
    <PARAM NAME=movie VALUE="Content/FLASH/test.swf"> 
    <EMBED src="Content/FLASH/test.swf" WIDTH="800" HEIGHT="630" NAME="2" ALIGN=""></EMBED>
    </OBJECT> 
</div>

 -->
</asp:Content>

